<template>
  <el-container class="home-container">
    <!-- 顶部导航区保持不变 -->
    <el-header class="header-panel" style="margin-top: 10px">
      <div class="nav-container">
        <div
          v-if="loginPerson"
          style="
            display: flex;
            align-items: left;
            justify-content: center;
            align-items: center;
          "
        >
          <div>
            <el-avatar
              :size="50"
              :src="loginPerson.img"
              style="border: 1px solid #ccc"
            ></el-avatar>
          </div>
          <div style="margin-left: 10px; height: 40px; line-height: 40px">
            <span
              >您好，
              <span style="color: #409eff; font-weight: bold">{{
                loginPerson.username
              }}</span>
            </span>
            <span style="margin-left: 10px">
              <el-tag
                :type="
                  loginPerson.customer_type === 'user' ? 'success' : 'warning'
                "
                effect="dark"
              >
                {{
                  loginPerson.customer_type === "user"
                    ? "普通用户"
                    : "认证供应商"
                }}
              </el-tag>
            </span>
          </div>
        </div>
        <div v-else style="display: flex; align-items: left">
          未获取到用户信息
        </div>
        <!-- 导航菜单 -->
        <el-menu
          :default-active="$route.path"
          class="nav-menu"
          mode="horizontal"
          @select="handleMenuSelect"
          style="display: flex; justify-content: center; align-items: center"
        >
          <!-- 用户导航 -->
          <template v-if="loginPerson?.customer_type === 'user'">
            <!-- 购物首页 -->
            <el-menu-item index="/store">
              <i class="el-icon-shopping-cart-1"></i>
              <span slot="title">购物首页</span>
            </el-menu-item>
            <!-- 购物车 -->
            <el-menu-item index="/cart">
              <i class="el-icon-shopping-cart-2"></i>
              <span slot="title">购物车</span>
            </el-menu-item>
            <!-- 订单处理 -->
            <el-menu-item index="/order">
              <i class="el-icon-tickets"></i>
              <span slot="title">订单处理(查看/删除)</span>
            </el-menu-item>
            <!-- 修改个人信息 -->
            <el-menu-item index="/owner">
              <i class="el-icon-user"></i>
              <span slot="title">个人信息||信息修改</span>
            </el-menu-item>
          </template>

          <!-- 供应商导航 -->
          <template v-if="loginPerson?.customer_type === 'supplier'">
            <!-- 商品列表 -->
            <el-menu-item index="/productManagement">
              <i class="el-icon-goods"></i>
              <span slot="title">商品列表管理(添加/修改/删除)</span>
            </el-menu-item>
            <!-- 订单处理 -->
            <el-menu-item index="/order">
              <i class="el-icon-tickets"></i>
              <span slot="title">订单查看</span>
            </el-menu-item>
            <!-- 修改个人信息 -->
            <el-menu-item index="/owner">
              <i class="el-icon-user"></i>
              <span slot="title">个人信息||信息修改</span>
            </el-menu-item> </template
          ><el-button type="danger" @click="logout" size="large"
            >退出登录</el-button
          >
        </el-menu>
      </div>
    </el-header>

    <!-- 主体内容区 -->
    <el-container style="overflow: auto">
      <el-main class="right-panel">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// import { mapState } from "vuex";

export default {
  name: "HomeView",
  computed: {
    // ...mapState({
    //   loginPerson: (state) => state.loginPerson,
    // }),
    loginPerson() {
      return (
        this.$store.state.loginPerson ||
        JSON.parse(localStorage.getItem("loginPerson"))
      );
    },
  },
  methods: {
    handleMenuSelect(path) {
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
    logout() {
      this.$store.commit("SET_LOGIN_PERSON", null);
      localStorage.removeItem("loginTime");
      localStorage.removeItem("loginPerson");
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.left-panel {
  background: #fff;
  padding: 16px;
  box-shadow: 2px 0 8px rgba(29, 35, 41, 0.05);

  .user-card {
    /* height: calc(100vh - 80px); */
    position: sticky;
    top: 16px;
  }
}

.right-panel {
  background: #f0f2f5;
  padding: 20px;
  margin: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 保持顶部导航原有样式 */
.header-panel {
  background: #fff;
  padding: 0;
  height: auto !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .nav-container {
    display: flex;
    align-items: center;
    padding: 0 10px 0 0; // 增加左侧padding
    justify-content: space-between; // 内容靠右对齐

    .nav-menu {
      flex: 0 1 auto; // 取消flex扩展
      margin-left: 40px; // 增加左侧间距
      border-bottom: none;

      .el-menu-item {
        height: 60px;
        line-height: 60px;
        padding: 0 25px;
      }
    }
  }
}
</style>
